<template>
	<view class="pad-30">
		<view class="font-50">基本信息</view>
		<view class="mar-top-20 info">账户名：{{info.username}}</view>
		<view class="mar-top-20 info">手机：{{info.phone}}</view>
		<view class="mar-top-20 info">性别：{{info.sex == 1 ? '男' : '女'}}</view>
		<view class="mar-top-20 info">姓名：{{info.name}}</view>
		<view class="mar-top-20 info">单位：{{info.unit_name}}</view>
		<view class="mar-top-20 info">所属区域：{{info.region_text}}</view>

		<up-button @click="show=true" class="mar-top-30" type="primary" shape="circle">修改密码</up-button>
		<up-popup :show="show" @close="show = false" mode="center" round="5">
			<view class="pad-30 form-box">
				<u--form labelWidth="100" class="mar-top-30" labelPosition="left" :model="userInfo" ref="form1">
					<u-form-item label="原密码" prop="old_password" borderBottom="true">
						<u--input type="text" clearable placeholder="请输入原密码" v-model="userInfo.old_password"
							border="none"></u--input>
					</u-form-item>
					<u-form-item label="新密码" prop="new_password" class="mar-top-40" borderBottom="true">
						<u-input clearable type="text" placeholder="请输入新密码" v-model="userInfo.new_password"
							border="none">
						</u-input>
					</u-form-item>
					<u-form-item label="确认密码" prop="confirm_password" class="mar-top-40" borderBottom="true">
						<u-input clearable type="text" placeholder="请输入新密码" v-model="userInfo.confirm_password"
							border="none">
						</u-input>
					</u-form-item>
				</u--form>
			</view>
			<view class="button-box flex">
				<view class="button text-center" @click="show=false">取消</view>
				<view @click="hanldeSubmit" class="button button2 text-center">确认</view>
			</view>
		</up-popup>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue';

	// 接口引入
	import {
		myInfo,
		forPassword
	} from '/config/api.js';
	
	import { toast } from '@/uni_modules/uview-plus'

	// 修改密码
	const show = ref(false);

	let userInfo = reactive({
		old_password: '',
		new_password: '',
		confirm_password: ''
	})

	// 提交修改密码
	const hanldeSubmit = () => {

		if (userInfo.new_password !== userInfo.confirm_password) {
			toast('新密码和确认密码不一致');
			return
		}
		
		forPassword(userInfo).then(res=>{
			toast(res.msg);
			show.value = false;
		})
	}

	const info = ref('');
	myInfo().then(res => {
		info.value = res.data;
	})
</script>

<style scoped lang="scss">
	.info {
		padding: 20rpx 0;
		box-sizing: border-box;
		border-bottom: 1px solid #e5dddd;
	}
	
	.form-box{
		width: 700rpx;
	}

	.button-box {
		padding: 30rpx;
		box-sizing: border-box;

		.button {
			flex: 1;
			border: 1px solid #e5dddd;
			padding: 10rpx 40rpx;
			box-sizing: border-box;
		}

		.button2 {
			background: #d43c33;
			border: 1px solid #d43c33;
		}
	}
</style>